<template>
	<s-layout navbar="custom" title="商家详情" :showLeftButton="true" :navbarStyle="{ type: 'color', color: state.bgColor }"
		:onShareAppMessage="shareInfo">

		<view class="banner">
			<swiper class="banner-swiper" :current="current" @change="handler">
				<swiper-item>
					<image :src="sheep.$url.cdn(state.detail.banner?.cover)" class="banner-swiper-image"
						mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image :src="sheep.$url.cdn(state.detail.banner?.service)" class="banner-swiper-image"
						mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image :src="sheep.$url.cdn(state.detail.banner?.surroundings)" class="banner-swiper-image"
						mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image :src="sheep.$url.cdn(state.detail.banner?.photo)" class="banner-swiper-image"
						mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="tag-box ss-flex align-center">
				<view class="tag-box-item f-han-san" :class="[tag_index === 0 ? 'tag-active' : '']"
					@click="onChange(0)">封面
				</view>
				<view class="tag-box-item f-han-san" :class="[tag_index === 1 ? 'tag-active' : '']"
					@click="onChange(1)">
					服务展示</view>
				<view class="tag-box-item f-han-san" :class="[tag_index === 2 ? 'tag-active' : '']"
					@click="onChange(2)">
					环境设施</view>
				<view class="tag-box-item f-han-san" :class="[tag_index === 3 ? 'tag-active' : '']"
					@click="onChange(3)">相册
				</view>
			</view>
		</view>
		<view class="info-box">
			<view class="info-box-name f-han-san">{{ state.detail.name }}</view>
			<button  open-type="share" class="ss-reset-button share">
					<image class="share-img" :src="sheep.$url.static('/static/img/shop/goods/share.png')" mode="aspectFit">
					</image>
					<view class="share-txt">分享</view>
				
			</button>
			<!-- <view class="share" @click="shareShop">
				<image class="share-img" :src="sheep.$url.static('/static/img/shop/goods/share.png')" mode="aspectFit">
				</image>
				<view class="share-txt">分享</view>
			</view> -->
			<image :src="sheep.$url.cdn('/storage/creator/202408021825547304.png')" class="info-box-level" />
			<view class="info-box-evaluate">
				<view class="info-box-evaluate-top ss-flex ss-row-between align-center">
					<view class="info-box-evaluate-top-left ss-flex align-center">
						<view class="info-box-evaluate-top-left-like-list ss-flex">
							<template v-if="bolidStar > 0">
								<image v-for="i in bolidStar" :key="i" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408301441592746.png" mode="aspectFill" class="selected ss-m-r-8"></image>
							</template>

							<template v-if="(5 - emptyStar - bolidStar) > 0">
								<image  mode="aspectFit"
									class="selected ss-m-r-8"
									:src="sheep.$url.cdn('/storage/creator/202408301441591997.png')" />
							</template>
							<template v-if="emptyStar > 0">
								<image v-for="h in emptyStar" :key="h"  src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408301441591230.png" mode="aspectFill" class="selected ss-m-r-8"></image>
							</template>
						</view>
						<view class="info-box-evaluate-top-left-num f-han-san"
							v-if="state.detail.comment_num && state.detail.comment_num.length > 0">{{ state.comment_num
							}}条
						</view>
						<view class="info-box-evaluate-top-left-price f-han-san"
							v-if="state.detail.per_pay && state.detail.per_pay.length > 0">
							￥{{ state.detail.per_pay }}/人
						</view>
					</view>
					<view class="info-box-evaluate-top-right ss-flex align-center">
						<view class="info-box-evaluate-top-right-title f-han-san single-line">
							{{ state.detail.store_category }}</view>
						<!-- <image  :src="sheep.$url.cdn('/mengchong/details-arrow-right.png')" /> -->

					</view>
				</view>
				<view class="info-box-evaluate-bottom ss-flex align-center">
					<view class="info-box-evaluate-bottom-count f-han-san">{{ state.detail.mark }}</view>
					<view class="info-box-evaluate-bottom-item" v-if="otherMark.length > 0">医生：{{ otherMark[0] }}
						服务：{{ otherMark[1] }} 划算：{{ otherMark[2] }}</view>
				</view>
			</view>
			<view class="info-box-time ss-flex ss-row-between align-end">
				<view class="info-box-time-left">
					<view class="info-box-time-left-top ss-flex align-start">
						<!-- <view class="info-box-time-left-top-status f-han-san" style="flex-shrink:0">
							<template v-if="state.detail.business_status=='ing'">
								<text>营业中</text>
							</template>
							<template v-if="state.detail.business_status=='close'">
								<text>休息中</text>
							</template>
						</view> -->
						<view class="info-box-time-left-top-time f-han-san">{{ calcBusiness }}</view>
					</view>

					<view class="info-box-time-left-class-list ss-flex">
						<template v-if="state.detail.tag && state.detail.tag.length > 0">
							<view class="info-box-time-left-class-list-item f-han-san"
								v-for="(item, index) in state.detail.tag" :key="index">{{ item }}</view>
						</template>
					</view>
				</view>
				<view class="info-box-time-right ss-flex">
					<template v-if="isAuditMode == false">
						<view class="info-box-time-right-item ss-flex align-center ss-row-center" @click="learn"
							v-if="state.detail.mobile">
							<view class="info-box-time-right-item-top ss-flex align-center ss-row-center">
								<image :src="sheep.$url.cdn('/mengchong/details-time-item-1.png')" />
							</view>
							<view class="info-box-time-right-item-bottom f-han-san">咨询</view>
						</view>
					</template>


					<view class="info-box-time-right-item ss-flex align-center ss-row-center ss-m-l-40"
						@tap="callTelphone" v-if="state.detail.mobile">
						<view class="info-box-time-right-item-top ss-flex align-center ss-row-center">
							<image :src="sheep.$url.cdn('/mengchong/details-time-item-2.png')" />
						</view>
						<view class="info-box-time-right-item-bottom f-han-san">电话</view>
					</view>
				</view>
			</view>
			<view class="info-box-address ss-flex ss-row-between" @click="openMap">
				<view class="info-box-address-left">
					<view class="info-box-address-left-top ss-flex align-center">
						<view class="info-box-address-left-top-title f-han-san">{{ state.detail.address }}</view>
						<image :src="sheep.$url.cdn('/mengchong/details-arrow-right.png')" />
					</view>
					<view class="info-box-address-left-bottom ss-flex align-center"
						v-if="state.detail.distance && state.detail.distance.length > 0">
						<image :src="sheep.$url.cdn('/mengchong/details-address-icon.png')" />
						<view class="info-box-address-left-bottom-text f-han-san">
							驾车16.6km，需约{{ state.detail.distance_time }}</view>
					</view>
				</view>
				<view class="info-box-address-right ss-flex ss-row-center align-center">
					<image :src="sheep.$url.cdn('/mengchong/details-car.png')" />
					<view class="info-box-address-right-title f-han-san">打车</view>
				</view>
			</view>
		</view>

		<view class="anchor-box ss-flex">

			<template v-if="state.category_list.length > 0">
				<view class="anchor-box-item ss-flex ss-row-center align-center "
					:class="[state.anchor_index === 1 ? 'anchor-active' : '']" @click="onHandleAnchor(1)">
					<view class="anchor-box-item-title">团购</view>
					<view class="anchor-box-item-tips" :class="[state.anchor_index === 1 ? 'anchor-border' : '']">&nbsp;
					</view>
				</view>
			</template>

			<template v-if="state.detail.brand_name && state.detail.brand_name.length > 0">
				<view class="anchor-box-item ss-flex ss-row-center align-center"
					:class="[state.anchor_index === 2 ? 'anchor-active' : '']" @click="onHandleAnchor(2)">
					<view class="anchor-box-item-title">品牌</view>
					<view class="anchor-box-item-tips" :class="[state.anchor_index === 2 ? 'anchor-border' : '']">品牌介绍
					</view>
				</view>
			</template>

			<template v-if="nurseList.length > 0">
				<view class="anchor-box-item ss-flex ss-row-center align-center"
					:class="[state.anchor_index === 3 ? 'anchor-active' : '']" @click="onHandleAnchor(3)">
					<view class="anchor-box-item-title">服务团队</view>
					<view class="anchor-box-item-tips" :class="[state.anchor_index === 3 ? 'anchor-border' : '']">
						{{ teamTotal }}位</view>
				</view>
			</template>

			<!-- <view class="anchor-box-item ss-flex ss-row-center align-center"
				:class="[state.anchor_index === 4 ? 'anchor-active' : '']" @click="onHandleAnchor(4)">
				<view class="anchor-box-item-title">案例</view>
				<view class="anchor-box-item-tips" :class="[state.anchor_index === 4 ? 'anchor-border' : '']">5诊疗案例
				</view>
			</view> -->
			<view class="anchor-box-item ss-flex ss-row-center align-center"
				:class="[state.anchor_index === 5 ? 'anchor-active' : '']" @click="onHandleAnchor(5)">
				<view class="anchor-box-item-title">评价</view>
				<template v-if="state.total > 0">
					<view class="anchor-box-item-tips" :class="[state.anchor_index === 5 ? 'anchor-border' : '']">
						{{ state.total }}条
					</view>
				</template>

				<template v-else>
					<view class="anchor-box-item-tips" :class="[state.anchor_index === 5 ? 'anchor-border' : '']">暂无评价
					</view>
				</template>
			</view>
		</view>

		<!-- 团购 -->
		<view class="purchase-box" id="anchor_1" v-if="state.category_list.length > 0">
			<view class="purchase-box-title ss-flex ss-row-between align-center">
				<view class="purchase-box-title-left f-han-san">团</view>
				<view class="purchase-box-title-right ss-flex">
					<view class="purchase-box-title-right-item ss-flex align-center ss-m-r-30">
						<image :src="sheep.$url.cdn('/mengchong/details-purchase.png')">
						</image>
						<view class="purchase-box-title-right-item-text f-han-san">随时退</view>
					</view>
					<view class="purchase-box-title-right-item ss-flex align-center">
						<image :src="sheep.$url.cdn('/mengchong/details-purchase.png')">
						</image>
						<view class="purchase-box-title-right-item-text f-han-san">过期退</view>
					</view>
				</view>
			</view>
			<!-- 分类导航 -->
			<view class="purchase-class-list">
				<scroll-view :scroll-x="true" scroll-with-animation class="purchase-scroll"
					:scroll-left="state.scrollLeft">
					<view class="purchase-scroll-item f-han-san"
						:class="[state.purchase_index === -1 ? 'purchase-active' : '']" @click="onHandlePurchase(-1)">全部
					</view>
					<view class="purchase-scroll-item f-han-san"
						:class="[state.purchase_index === index ? 'purchase-active' : '']"
						v-for="(item, index) in state.detail.category_list" :key="index"
						@click="onHandlePurchase(index)">
						{{ item.name }}</view>
				</scroll-view>
			</view>
			<!-- <view class="purchase-box-types ss-flex" v-if="src.length>0">
				<view class="purchase-box-types-item f-han-san purchase-types-active">全部</view>
				<view class="purchase-box-types-item f-han-san">猫猫</view>
				<view class="purchase-box-types-item f-han-san">狗狗</view>
			</view> -->
			<view>
				<view class="purchase-setmeal-list" v-for="(item, index) in showGoodsList" :key="index">
					<view class="purchase-setmeal-list-item ss-flex">
						<image :src="sheep.$url.cdn(item.image)" class="purchase-setmeal-list-item-image"
							mode="aspectFill" />
						<view class="purchase-setmeal-list-item-info ss-flex ss-row-between align-start">
							<view>
								<view class="set-meal-item-name f-han-san">{{ item.title }}</view>
								<view class="set-meal-item-tips f-han-san">{{ item.labels }}</view>
							</view>
							<view class="set-meal-item-btn-box-left f-han-san ss-m-t-30 color_green">¥{{ item.price[0]
							}}
							</view>
							<view class="set-meal-item-btn-box ss-flex ss-row-between align-center">
								<view class="set-meal-item-btn-box-left f-han-san">
									年售{{ item.sales > 10 ? item.sales : '≤10' }}</view>
								<view class="set-meal-item-btn-box-right f-han-san" @click="buy(item)">抢购</view>
							</view>
						</view>
					</view>
				</view>

				<view class="purchase-setmeal-list" style="margin-top: 0;" v-if="lookMore == true">
					<view class="purchase-setmeal-list-item ss-flex ss-m-t-40" v-for="(item, index) in hiddenGoodsList"
						:key="index">
						<image :src="sheep.$url.cdn(item.image)" class="purchase-setmeal-list-item-image"
							mode="aspectFill" />
						<view class="purchase-setmeal-list-item-info ss-flex ss-row-between align-start">
							<view>
								<view class="set-meal-item-name f-han-san">{{ item.title }}</view>
								<view class="set-meal-item-tips f-han-san">{{ item.labels }}</view>
							</view>
							<view class="set-meal-item-btn-box-left f-han-san ss-m-t-30 color_green">¥{{ item.price[0]
							}}
							</view>
							<view class="set-meal-item-btn-box ss-flex ss-row-between align-center">
								<view class="set-meal-item-btn-box-left f-han-san">
									年售{{ item.sales > 10 ? item.sales : '≤10' }}</view>
								<view class="set-meal-item-btn-box-right f-han-san" @click="buy(item)">抢购</view>
							</view>
						</view>
					</view>
				</view>
				<template v-if="hiddenGoodsList && hiddenGoodsList.length > 0">
					<view class="look-more" @click="lookMoreClick">
						<view class="look-more-text">{{ lookMoreText }}</view>
						<uni-icons :type="iconType" size="24" color="#3D3D3D" class="look-more-icon"></uni-icons>
					</view>
				</template>

			</view>
		</view>
		<!-- 商家会员卡 -->
		<view class="blank ss-m-t-40"></view>
		<view class="member" id="anchor_2">
			<view class="member-title ss-flex ss-row-between align-center">
				<view class="member-title-left ss-flex">
					<view class="member-title-left-sign f-han-san">卡</view>
					<view class="member-title-left-text f-han-san">商家会员卡</view>
				</view>
				<view class="member-title-right ss-flex">
					<view class="member-title-left-item ss-flex align-center ss-m-r-15">
						<image :src="sheep.$url.cdn('/mengchong/details-purchase.png')" />
						<view class="member-title-left-item-text f-han-san">专属客服</view>
					</view>
					<view class="member-title-left-item ss-flex align-center ss-m-r-15">
						<image :src="sheep.$url.cdn('/mengchong/details-purchase.png')" />
						<view class="member-title-left-item-text f-han-san">随时退</view>
					</view>
					<view class="member-title-left-item ss-flex align-center ss-m-r-15">
						<image :src="sheep.$url.cdn('/mengchong/details-purchase.png')" />
						<view class="member-title-left-item-text f-han-san">过期退</view>
					</view>
				</view>
			</view>
			<view class="member-list ss-m-t-40">
				<scroll-view :scroll-x="true" class="member-scroll">
					<view class="member-scroll-item">
						<image :src="sheep.$url.cdn('/storage/creator/202408031747031812.png')" mode="aspectFill" />
					</view>
					<view class="member-scroll-item">
						<image :src="sheep.$url.cdn('/storage/creator/202408031747039693.png')" mode="aspectFill" />
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="blank_10"></view>
		<!-- 品牌介绍 -->
		<view class="barnd" v-if="state.detail.intro && state.detail.brand_name">
			<view class="brand-top">品牌介绍</view>

			<view class="brand-content">
				<image :src="sheep.$url.cdn(state.detail.icon)" mode="aspectFill" class="brand-img" />
				<view class="brand-right">
					<view class="brand-title">
						<view class="title">{{ state.detail.brand_name }}</view>
						<!-- <image :src="sheep.$url.cdn('/mengchong/details-arrow-right.png')" class="brand-right-arrow" /> -->
					</view>
					<view class="brand-labels">
						{{ state.detail.intro }}
						<!-- <image :src="sheep.$url.cdn('/storage/creator/202408071117189139.png')" class="brand-yes" />
						<view class="brand-labels-item">24小时营业</view>
						<image :src="sheep.$url.cdn('/storage/creator/202408071117189139.png')" class="brand-yes" />
						<view class="brand-labels-item">大型手术</view>
						<image :src="sheep.$url.cdn('/storage/creator/202408071117189139.png')" class="brand-yes" />
						<view class="brand-labels-item">宠物医疗</view> -->
					</view>
				</view>
			</view>
		</view>

		<div class="tip_image">
			<image
				src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sjrz/20250403/4733e751c2fbf4fa4994a169ba4e03f6.png"
				mode="widthFix" />
		</div>

		<!-- 服务团队组件 -->
		<view class="serve" v-if="nurseShow == true">

			<view class="serve-top ss-flex-row ss-row-between ss-col-center" id="anchor_3">
				<view class="serve-desc ">服务团队<text v-if="teamTotal > 0">（{{ teamTotal }}）</text></view>
				<image :src="sheep.$url.cdn('/mengchong/details-arrow-right.png')" class="serve-right"
					mode="aspectFill" />
			</view>

			<view class="serve-category">
				<template v-for="(item, index) in state.detail.nurse" :key="index">
					<view class="serve-category-item" :class="{ 'serve-active': staffIndex == index }"
						@click="staffClick(item, index)">{{ item.nurse_type_name }}</view>
				</template>
			</view>

			<template v-if="nurseList.length > 0">
				<scroll-view class="serve-scroll ss-m-t-20" scroll-x="true">
					<view class="serve-scroll-item" v-for="(item, index) in nurseList" :key="index"
						@click="nurseClick(item, index)">
						<image :src="sheep.$url.cdn(item.nurse_picture)" mode="aspectFill" class="serve-img" />
						<view class="serve-identity">官方认证</view>
						<view class="serve-title">{{ item.nurse_name }}</view>
						<view class="serve-nurse">{{ item.nurse_job }}</view>
						<view class="serve-long">从业{{ item.nurse_life }}年</view>
					</view>
				</scroll-view>
			</template>
		</view>
		<!-- 诊疗案例 -->
		<!-- <view class="case" v-if="false"> 
			<view class="case-top">
				<view class="case-desc">诊疗案例（5）</view>
				<image :src="sheep.$url.cdn('/mengchong/details-arrow-right.png')" class="case-right"  mode="aspectFill" />
			</view>
			<scroll-view class="case-scroll" scroll-x="true">
				<view  class="case-scroll-item" >
					<image :src="sheep.$url.cdn('/storage/creator/202408070935014991.png')" mode="aspectFill" class="case-img" />
					<view class="case-title">猫下泌尿道综合征</view>
					<view class="case-labels">
						<view class="case-labels-item">宠物猫</view>
						<view class="case-labels-item">普内科</view>
					</view>
				</view>
				<view  class="case-scroll-item">
					<image :src="sheep.$url.cdn('/storage/creator/202408070935014456.png')" mode="aspectFill" class="case-img" />
					<view class="case-title">蠕形螨感染</view>
					<view class="case-labels">
						<view class="case-labels-item">宠物狗</view>
						<view class="case-labels-item">皮肤科</view>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<view class="blank_20" v-if="nurseShow == true"></view>
		<!-- 商家评论 -->
		<view class="comment" id="anchor_5">
			<view class="comment-title ss-flex ss-row-between align-center">
				<view class="comment-title-left f-han-san">评价
					<text v-if="state.total && state.total > 0">({{ state.total }})条</text>
				</view>
				<!-- <image :src="sheep.$url.cdn('/mengchong/details-arrow-right.png')" class="comment-title-right" /> -->
			</view>

			<template v-if="state.detail.comment_tag && state.detail.comment_tag.length > 0">
				<view class="comment-summary ss-flex ss-row-start ss-m-b-30">
					<view class="comment-Summary-item f-han-san ss-p-10" :class="{ active: index == comment_tag_index }"
						v-for="(item, index) in state.detail.comment_tag" :key="index"
						@click="commentTagClick(item, index)">{{ item.title }}</view>
				</view>
			</template>

			<template v-if="state.list && state.list.length > 0">
				<view class="user-comment ss-m-t-10" v-for="(item, index) in state.list" :key="index">
					<view class="user-comment-info ss-flex">
						<image class="user-comment-info-image" :src="sheep.$url.cdn(item.user_avatar)"
							mode="aspectFill" />
						<view class="user-comment-info-text ss-flex ss-row-between align-start">
							<view class="user-comment-info-text-name f-han-san">{{ item.user_nickname }}</view>
							<view class="user-comment-info-text-time f-han-san">{{ timestampTostr(item.create_time) }}发表
							</view>
						</view>
					</view>

					<view class="user-comment-content ss-flex ss-row-center align-start">
						<view class="user-comment-content-text f-han-san">
							{{ item.content }}
						</view>

						<template v-if="JSON.parse(item.images).length > 0">

							<view class="ss-flex ss-row-left ss-col-center">

								<image class="user-comment-content-image ss-m-x-10" :src="sheep.$url.cdn(it)"
									mode="aspectFill" v-for="(it, index) in JSON.parse(item.images)" :key="index" />
							</view>
						</template>

					</view>
				</view>
				<view class="comment-more f-han-san">查看{{ state.total }}条评价</view>
			</template>

			<uni-load-more v-if="state.total > 0" :status="state.loadStatus"
				:content-text="{ contentdown: '点击或上拉加载更多', }" @tap="loadmore" />

			<s-empty v-if="state.total <= 0 && state.loadStatus === 'noMore'"
				:icon="sheep.$url.cdn('/mengchong/soldout-empty.png')" text="暂无评论">
			</s-empty>
		</view>
		<!-- 滚动悬浮顶部盒子 -->
		<view class="class-top-box ss-flex" :style="{ top: `${sheep.$platform.device.statusBarHeight + 44}px` }"
			v-show="state.class_show === true">

			<template v-if="state.category_list.length > 0">
				<view class="class-top-box-item ss-flex ss-row-center align-center"
					:class="[state.anchor_index === 1 ? 'anchor-active' : '']" @click="onHandleAnchor(1)">
					<view class="class-top-box-item-text">团购</view>
					<view class="class-top-box-item-line"
						:style="{ background: state.anchor_index === 1 ? '#F46800 ' : '#fff' }"></view>
				</view>
			</template>

			<template v-if="state.detail.brand_name && state.detail.brand_name.length > 0">
				<view class="class-top-box-item ss-flex ss-row-center align-center"
					:class="[state.anchor_index === 2 ? 'anchor-active' : '']" @click="onHandleAnchor(2)">
					<view class="class-top-box-item-text">品牌</view>
					<view class="class-top-box-item-line"
						:style="{ background: state.anchor_index === 2 ? '#F46800 ' : '#fff' }"></view>
				</view>
			</template>

			<template v-if="nurseList.length > 0">
				<view class="class-top-box-item ss-flex ss-row-center align-center"
					:class="[state.anchor_index === 3 ? 'anchor-active' : '']" @click="onHandleAnchor(3)">
					<view class="class-top-box-item-text">服务团队</view>
					<view class="class-top-box-item-line"
						:style="{ background: state.anchor_index === 3 ? '#F46800 ' : '#fff' }"></view>
				</view>
			</template>

			<!-- <view class="class-top-box-item ss-flex ss-row-center align-center" :class="[state.anchor_index === 4 ? 'anchor-active' : '']" @click="onHandleAnchor(4)">
				<view class="class-top-box-item-text">案例</view>
				<view class="class-top-box-item-line"
					:style="{background:state.anchor_index === 4 ? '#04C775' : '#fff'}"></view>
			</view> -->

			<view class="class-top-box-item ss-flex ss-row-center align-center"
				:class="[state.anchor_index === 5 ? 'anchor-active' : '']" @click="onHandleAnchor(5)">
				<view class="class-top-box-item-text">评价</view>
				<view class="class-top-box-item-line"
					:style="{ background: state.anchor_index === 5 ? '#F46800 ' : '#fff' }">
				</view>
			</view>

		</view>

		<view class="group-cart">
			<view style="position: relative;width: 86rpx;
		height: 86rpx;">
				<image class="group-cart-image"
					src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/group-cart.png" mode=""
					@click="jumpCart">
				</image>
				<view class="group-num" v-if="cartLength >= 1">{{ cartLength }}</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
import {
	computed,
	reactive,
	ref,
	getCurrentInstance,
	onMounted
} from 'vue';

import merchantApi from '@/sheep/api/merchant'
import {
	onLoad,
	onShow,
	onPageScroll,
	onReachBottom,
	onShareTimeline
} from '@dcloudio/uni-app';
import $store from '@/sheep/store';
import sheep from '@/sheep';

import dayjs from "dayjs"
import tools from '@/sheep/helper/tools';
// #ifdef APP
import {
	showAuditModal
} from '@/sheep/hooks/useAudit.js'
// #endif
import {
	showShareModal
} from '@/sheep/hooks/useModal';

import _ from "lodash"

const isAuditMode = computed(() => sheep.$store('app').isAuditMode);


//轮播图索引
const current = ref(0);
//轮播图下标签索引
const tag_index = ref(0);
//评论索引
const comment_tag_index = ref(0)


//团队服务选择索引
const staffIndex = ref(0);
//查看更多按钮
const lookMore = ref(false);

//查看更多icon图标
const iconType = ref("down");


const state = reactive({
	anchor_index: 1,
	purchase_index: -1,
	bgColor: 'transparent',
	scrollLeft: 0,
	contentScrollW: 0,
	class_show: false,
	store_id: -1,
	//默认经纬度
	lat: "",
	lng: "",
	//数据
	detail: {},
	//团购分类
	category_list: [],

	//分页
	page: 1,
	list: [],
	loadStatus: 'more',
	total: 0,
	category_list_goods_all: [] //全部团购
})

const weekMap = {
	'monday': '周一',
	'tuesday': '周二',
	'wednesday': '周三',
	'thursday': '周四',
	'friday': '周五',
	'saturday': '周六',
	'sunday': '周日',
}

const cartLength = computed(() => sheep.$store('cart').cartLength)

//团购商品显示出来的列表
const showGoodsList = computed(() => {
	if (state.purchase_index === -1) {
		return state.category_list_goods_all.slice(0, 2)
	} else {
		if (state.category_list[state.purchase_index]?.goods.length === 0) {
			return []
		}
		return state.category_list[state.purchase_index]?.goods.slice(0, 2);
	}

})
//隐藏的团购商品列表
const hiddenGoodsList = computed(() => {
	if (state.purchase_index == -1) {
		if (state.category_list_goods_all.length >= 2) {
			return state.category_list_goods_all.slice(2, state.category_list_goods_all.length)
		}
		return []
	} else {
		if (state.category_list[state.purchase_index]?.goods && state.category_list[state.purchase_index]
			?.goods.length >= 2) {
			return state.category_list[state.purchase_index].goods.slice(2, state.category_list[state
				.purchase_index].goods.length)
		}
		return []
	}

})

//服务团队是否显示
const nurseShow = computed(() => {

	if (!_.isEmpty(state.detail.nurse)) {
		var total = 0;
		_.map(state.detail.nurse, function (item, index) {
			total = total + item.nurse.length
		})
		return total > 0 ? true : false;
	} else {
		return false;
	}
})

//查看更多文字描述
const lookMoreText = computed(() => {
	return lookMore.value == false ? "查看更多" : "收起";
})

//查看更多点击方法
const lookMoreClick = () => {
	lookMore.value = !lookMore.value;
	iconType.value = lookMore.value == false ? "down" : "up";
}

//查看更多是否显示
const lookMoreShow = () => {
	if (state.purchase_index == -1) {
		return state.category_list_goods_all.length > 2 ? true : false;
	} else {
		if (state.category_list[state.purchase_index]?.goods) {
			return state.category_list[state.purchase_index]?.goods.length > 2 ? true : false;
		} else {
			return false;
		}
	}

}

//团队服务列表	
const nurseList = computed(() => {

	if (state.detail.nurse && state.detail.nurse[staffIndex.value]?.nurse) {
		return state.detail.nurse[staffIndex.value]?.nurse;
	} else {
		return [];
	}

})

//团队服务总人数
const teamTotal = computed(() => {

	if (state.detail.nurse && state.detail.nurse.length > 0) {
		var total = 0;
		_.forEach(state.detail.nurse, function (value, index) {

			if (value.nurse && value.nurse.length > 0) {

				total = total + _.size(value.nurse);
			}
		})
		return total;
	} else {
		return ""
	}

})

const jumpCart = () => {
	sheep.$router.go('/pages/merchant/cart')
}

//轮播图滚动
const handler = (event) => {
	tag_index.value = event.detail.current;
}

//处理其他评分字段
const otherMark = computed(() => {

	if (_.isEmpty(state.detail.other_mark)) {
		return []
	} else {
		return _.values(state.detail.other_mark)
	}
})
//处理品牌--头像
const calcBrandSrc = computed(() => {
	if (state.detail && state.detail.icon) {

		return sheep.$url.cdn(state.detail.icon);
	} else {
		return sheep.$url.cdn("/storage/creator/202408071053055566.png");
	}
})

//实心星星数量
const bolidStar = computed(() => {
	return (state.detail.mark && state.detail.mark.length) > 0 ? Math.floor(state.detail.mark) : 0;
})
//计算空心
const emptyStar = computed(() => {

	if (Math.ceil(state.detail.mark) == 5) {
		return 0;
	} else {
		var num=Number(5-Math.ceil(state.detail.mark))
		return num;
	}
})

//营业时间
const calcBusiness = computed(() => {
	if (state.detail.business_rule && state.detail.business_rule[0]) {
		var str = ''
		if (state.detail.business_rule[0].cycle.length > 0) {
			state.detail.business_rule[0].cycle.forEach(item => {
				str = str + weekMap[item] + " "
			})
		}
		str += state.detail.business_rule[0].time_begin
		if (state.detail.business_rule[0].time_end) {
			str += "-" + state.detail.business_rule[0].time_end;
		}
		return str
	}
})
//服务团队，点击
const nurseClick = (item, index) => {

	sheep.$router.go("/pages/merchant/personal", {
		info: JSON.stringify(item)
	});
}

//时间戳转时间字符串
const timestampTostr = (timestamp) => {
	return dayjs(timestamp * 1000).format('YYYY-MM-DD');
}
//抢购点击事件
const buy = (item) => {
	sheep.$router.go('/pages/merchant/groupBuying', {
		id: item.id
	})
}

//服务团队分类点击
const staffClick = (item, index) => {
	staffIndex.value = index;
}

//咨询点击事件
const learn = () => {

	//#ifdef H5 || APP-PLUS
	uni.switchTab({
		url: `/im/index?to=message&id=${state.detail.mobile}`
	})
	// #endif

	// #ifdef MP-WEIXIN
	uni.navigateTo({
		url: `/im/H5/to?to=message&id=${state.detail.mobile}`
	})
	// #endif

}


//拨打商户电话
const callTelphone = () => {
	uni.showModal({
		title: '提示',
		content: '确定拨打商家电话？',
		success: function (res) {
			if (res.confirm) {


				// #ifdef APP
				showAuditModal('CALL_PHONE', () => {
					tools.callPhone(state.detail.mobile)
				}, () => { }, false)
				// #endif
				// #ifdef MP || H5
				tools.callPhone(state.detail.mobile)
				// #endif

			} else if (res.cancel) {
				console.log('用户点击取消');

			}
		}
	});
}

//打开地图
const openMap = () => {
	console.log('state.detail.lat', state.detail.lat)
	console.log('state.detail.lng', state.detail.lng)
	if (state.detail.lat) {
		uni.openLocation({
			latitude: Number(state.detail.lat),
			longitude: Number(state.detail.lng),
			address: state.detail.address,
			success: function () {
				console.log('success');
			}
		});
	}
}

onLoad(async (option) => {

	state.store_id = option.id
	//获取经纬度
	let address = uni.getStorageSync('district');

	state.lat = address.lat || 30.23555800000002;

	state.lng = address.lng || 120.25218299999995;

	// getScrollWidth()

	await getDetail(option.id)


	await getEvaluate();
	if ($store('user').isLogin) {
		sheep.$store('cart').getGroupList()
	}
})


onPageScroll((e) => {
	const {
		scrollTop
	} = e
	if (scrollTop > 430) {
		state.class_show = true
	} else {
		state.class_show = false
	}

	if (scrollTop > 0) {
		state.bgColor = '#fff'
	} else {
		state.bgColor = 'transparent'
	}
})

// const getScrollWidth = () => {
// 	const app = getCurrentInstance();
// 	const query = uni.createSelectorQuery().in(app);
// 	query.select('.purchase-scroll').boundingClientRect(res => {
// 		state.contentScrollW = res.width
// 	}).exec();
// 	query.selectAll('.purchase-scroll-item').boundingClientRect(data => {
// 		data.map((item, index) => {
// 			//  scroll-view 子元素组件距离左边栏的距离
// 			list[index].left = data[index].left;
// 			//  scroll-view 子元素组件宽度
// 			list[index].width = data[index].width
// 		})
// 	}).exec()
// }

//获取商家详情
const getDetail = async (id) => {

	const {
		error,
		data
	} = await merchantApi.merchantDetail(id, {
		lng: state.lng,
		lat: state.lat
	})

	if (error == 0) {
		state.detail = data;
		// console.log('state.detail:', state.detail);
		state.category_list = data.category_list;
		state.category_list.forEach(item => {
			item.goods.forEach(i => [
				state.category_list_goods_all.push(i)
			])
		})
	}
}

//获取评价详情
const getEvaluate = async () => {

	state.loadStatus = 'loading'

	var tag_id = 0;
	if (!_.isEmpty(state.detail.comment_tag)) {
		tag_id = state.detail.comment_tag[comment_tag_index.value]?.tag_id;
	}

	const {
		error,
		data
	} = await merchantApi.evaluate({
		page: state.page,
		list_rows: 10,
		store_id: state.store_id,
		tag_id: tag_id
	})

	if (error == 0) {

		state.list = state.list.concat(data.data)

		state.total = data.total

		if (state.list.length === 0) {
			state.total = 0
			state.loadStatus = 'noMore';
		}
		if (data.current_page < data.last_page) {
			state.loadStatus = 'more';
		} else {
			state.loadStatus = 'noMore';
		}
	}
}


//上啦加载评论列表
onReachBottom(() => {
	loadmore()
})

//下拉加载
const loadmore = () => {

	if (state.loadStatus !== 'noMore') {
		state.page++
		getEvaluate()
	}
}

//轮播图显示标点
const onChange = (index) => {
	current.value = index;
	tag_index.value = index

}
//评论标签点击
const commentTagClick = (item, index) => {
	comment_tag_index.value = index;
	state.page = 1;
	state.list = [];
	state.loadStatus = 'more',
		getEvaluate();
}
//团购，品牌，宠护员，评价点击事件
const onHandleAnchor = (index) => {

	state.anchor_index = index

	var id = '#anchor_' + index;
	uni.pageScrollTo({
		duration: 300,
		selector: id,
	});
}

const onHandlePurchase = async (index) => {

	state.purchase_index = index

	state.scrollLeft = state.detail.category_list[index].left - state.contentScrollW / 2 + state.detail
		.category_list[index].width / 2;
}

const shareInfo = computed(() => {
	console.log('sdgasdbarhbarwnbrtnj')
	if (_.isEmpty(state.detail)) return {};

	return sheep.$platform.share.getShareInfo({
		title: state.detail.name,
		image: sheep.$url.cdn(state.detail?.banner?.cover),
		desc: state.detail.intro,
		params: {
			page: '6',
			query: state.store_id,
		},
	}, {
		id: state.store_id,
		type: 'store', // 商品海报
		title: state.detail.name, // 商品标题
		image: sheep.$url.cdn(state.detail?.banner?.cover), // 商品主图
	},);
});

const shareData = computed(()=>({
   title: state.detail.name,
   path: `/pages/merchant/info?id=${state.store_id}`,
 }))
 
 
function shareShop() {//暂无团购商户分享海报接口，因此使用上述简单的
	showShareModal();
}

onShareTimeline(() => {
	return {
		title: state.detail.name,
		path: '/pages/merchant/info?id=' + state.detail.id,
		imageUrl: state.detail.banner?.cover,
	};
});
</script>

<style scoped lang="scss">
view {
	box-sizing: border-box;
}

.banner {
	width: 100%;
	height: 510rpx;
	position: relative;

	.banner-swiper {
		width: 100%;
		height: 510rpx;

		.banner-swiper-image {
			width: 100%;
			height: 100%;
		}
	}

	.tag-box {
		position: absolute;
		left: 42rpx;
		bottom: 60rpx;
		height: 46rpx;
		border-radius: 30rpx;
		background: #666666;
		padding: 0 14rpx;

		.tag-box-item {
			display: inline-block;
			height: 32rpx;
			line-height: 32rpx;
			padding: 0 8rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-right: 16rpx;
			border-radius: 20rpx;
		}
	}
}

.tag-active {
	background: #F8F8F8 !important;
	color: #3D3D3D !important;
}

.info-box {
	position: relative;
	width: 100%;
	background: #FFFFFF;
	margin-top: -46rpx;
	border-radius: 40rpx 40rpx 0 0;
	position: relative;
	z-index: 99;
	padding: 22rpx 34rpx;

	.info-box-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #3D3D3D;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.info-box-level {
		width: 32rpx;
		height: 32rpx;
		margin-top: 6rpx;
	}

	.info-box-evaluate {
		margin-top: 10rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #D8D8D8;

		.info-box-evaluate-top {
			.info-box-evaluate-top-left {
				.info-box-evaluate-top-left-like-list {
					margin-right: 24rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
				}

				.info-box-evaluate-top-left-num {
					font-size: 22rpx;
					color: #FF722B;
					margin-right: 10rpx;
				}

				.info-box-evaluate-top-left-price {
					font-size: 22rpx;
					color: #FF722B;
				}
			}

			.info-box-evaluate-top-right {
				.info-box-evaluate-top-right-title {
					font-size: 26rpx;
					font-weight: normal;
					color: #3D3D3D;
					margin-right: 6rpx;
					width: 300rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.info-box-evaluate-bottom {
			margin-top: 16rpx;

			.info-box-evaluate-bottom-count {
				width: 52rpx;
				height: 26rpx;
				border-radius: 20rpx 0rpx 16rpx 20rpx;
				background: #F83D3D;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 26rpx;
				text-align: center;
				color: #FFFFFF;
				margin-right: 6rpx;
			}

			.info-box-evaluate-bottom-item {
				font-size: 22rpx;
				font-weight: normal;
				line-height: normal;
				color: #3D3D3D;
			}
		}
	}


	.info-box-time {
		padding: 15rpx 0 15rpx;
		border-bottom: 1rpx solid #D8D8D8;

		.info-box-time-left {
			.info-box-time-left-top {
				.info-box-time-left-top-status {
					font-size: 28rpx;
					font-weight: 500;
					color: #F46800;
					margin-right: 20rpx;
				}

				.info-box-time-left-top-time {
					font-size: 24rpx;
					font-weight: 500;
					color: #3D3D3D;
				}
			}

			.info-box-time-left-class-list {
				margin-top: 20rpx;

				.info-box-time-left-class-list-item {
					width: 104rpx;
					height: 38rpx;
					border-radius: 12rpx;
					background: rgba(216, 216, 216, 0.53);
					font-size: 20rpx;
					font-weight: 500;
					line-height: 38rpx;
					text-align: center;
					color: #3D3D3D;
					margin-right: 30rpx;
				}
			}
		}

		.info-box-time-right {
			.info-box-time-right-item {
				flex-direction: column;

				.info-box-time-right-item-top {
					width: 50rpx;
					height: 50rpx;
					background: rgba(216, 216, 216, 0.53);
					border-radius: 50%;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.info-box-time-right-item-bottom {
					font-size: 20rpx;
					font-weight: 350;
					color: #3D3D3D;
					margin-top: 6rpx;
				}
			}
		}
	}

	.info-box-address {
		padding: 22rpx 0;
		border-bottom: 1rpx solid #D8D8D8;

		.info-box-address-left {
			.info-box-address-left-top {
				.info-box-address-left-top-title {
					font-size: 26rpx;
					font-weight: bold;
					color: #979797;
					margin-right: 8rpx;
				}

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}

			.info-box-address-left-bottom {
				margin-top: 8rpx;

				.info-box-address-left-bottom-text {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 26rpx;
					font-weight: 350;
					color: #979797;
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.info-box-address-right {
			flex-direction: column;

			.info-box-address-right-title {
				font-size: 20rpx;
				font-weight: 350;
				color: #3D3D3D;
				margin-top: 10rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}


.anchor-box {
	padding: 14rpx 32rpx;

	.anchor-box-item {
		flex-direction: column;
		margin-right: 40rpx;

		.anchor-box-item-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #3D3D3D;
		}

		.anchor-box-item-tips {
			min-width: 90rpx;
			font-size: 20rpx;
			line-height: 20rpx;
			font-weight: 350;
			color: #3D3D3D;
			margin-top: 6rpx;
			text-align: center;
			padding-bottom: 4rpx;
			border-bottom: 2rpx solid transparent;
		}
	}
}

.purchase-box {
	margin-top: 40rpx;
	padding: 0 32rpx;

	.purchase-box-title {
		.purchase-box-title-left {
			width: 40rpx;
			height: 40rpx;
			border-radius: 4rpx;
			background: #F75A5A;
			font-family: Source Han Sans;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 40rpx;
			text-align: center;
			color: #FCFCFC;
		}

		.purchase-box-title-right {
			.purchase-box-title-right-item {

				.purchase-box-title-right-item-text {
					height: 32rpx;
					line-height: 32rpx;
					font-size: 24rpx;
					font-weight: 300;
					color: #3D3D3D;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
	}

	.purchase-class-list {
		width: 100%;
		height: 60rpx;
		margin-top: 50rpx;
		border-bottom: 1rpx solid #D8D8D8;

		.purchase-scroll {
			width: 100%;
			height: 100%;
			white-space: nowrap;

			.purchase-scroll-item {
				display: inline-block;
				margin-right: 50rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #3D3D3D;
				padding-bottom: 5rpx;
				border-bottom: 2rpx solid transparent;
			}
		}
	}

	.purchase-box-types {
		margin-top: 15rpx;

		.purchase-box-types-item {
			width: 124rpx;
			height: 48rpx;
			border-radius: 20rpx;
			background: rgba(216, 216, 216, 0.49);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 48rpx;
			text-align: center;
			color: #3D3D3D;
			margin-right: 26rpx;
		}
	}

	.purchase-setmeal-list {
		margin-top: 40rpx;

		.purchase-setmeal-list-item {
			.purchase-setmeal-list-item-image {
				width: 196rpx;
				height: 190rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;
			}

			.purchase-setmeal-list-item-info {
				flex: 1;
				height: 190rpx;
				flex-direction: column;

				.set-meal-item-name {
					width: 500rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #3D3D3D;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.set-meal-item-tips {
					font-size: 26rpx;
					font-weight: 350;
					color: #3D3D3D;
					margin-top: 4rpx;
				}

				.set-meal-item-btn-box {
					width: 100%;

					.set-meal-item-btn-box-left {
						font-size: 24rpx;
						font-weight: 300;
						color: #3D3D3D;
					}

					.set-meal-item-btn-box-right {
						width: 124rpx;
						height: 48rpx;
						border-radius: 20rpx;
						background: #F46800;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 48rpx;
						text-align: center;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.look-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 16rpx;
		height: 40rpx;

		.look-more-text {
			font-size: 24rpx;
			font-weight: 300;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

		}

	}
}

.member {
	padding: 24rpx 32rpx;

	.member-title {
		.member-title-left {
			.member-title-left-sign {
				width: 40rpx;
				height: 40rpx;
				background-color: #F46800;
				font-size: 24rpx;
				font-weight: 300;
				line-height: 40rpx;
				text-align: center;
				color: #FFFFFF;
				margin-right: 14rpx;
			}

			.member-title-left-text {
				font-size: 24rpx;
				font-weight: bold;
				color: #3D3D3D;
			}
		}

		.member-title-right {
			.member-title-left-item {
				.member-title-left-item-text {
					height: 32rpx;
					line-height: 32rpx;
					font-size: 24rpx;
					font-weight: 300;
					color: #3D3D3D;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.member-list {
		.member-scroll {
			width: 100%;
			height: 100%;
			white-space: nowrap;

			.member-scroll-item {
				display: inline-block;
				width: 158rpx;
				height: 92rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
}

.imgs {
	width: 100%;

	.pinpai {
		width: 100%;
		height: 230rpx;
	}

	.team {
		width: 100%;
		height: 468rpx;
	}

	.anli {
		height: 330rpx;
		width: 100%;
	}

}

.comment {
	width: 100%;
	background-color: #fff;
	padding: 20rpx 32rpx;

	.comment-title {
		.comment-title-left {
			font-size: 34rpx;
			font-weight: 500;
			color: #3D3D3D;
		}

		.comment-title-right {
			width: 25rpx;
			height: 25rpx;
		}
	}

	.comment-summary {
		flex-wrap: wrap;
		margin-top: 30rpx;

		.comment-Summary-item {
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 20rpx;
			background-color: #FEEFEA;
			font-size: 26rpx;
			font-weight: 500;
			color: #3D3D3D;
			border-radius: 20rpx;
			margin-right: 15rpx;
			margin-bottom: 10rpx;
		}

		.active {
			color: #53D9BD;
		}
	}

	.user-comment {
		.user-comment-info {
			.user-comment-info-image {
				width: 70rpx;
				height: 70rpx;
				margin-right: 12rpx;
				border-radius: 50%;
			}

			.user-comment-info-text {
				height: 70rpx;
				flex-direction: column;

				.user-comment-info-text-name {
					width: 100%;
					font-size: 28rpx;
					font-weight: normal;
					color: #3D3D3D;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.user-comment-info-text-time {
					font-size: 24rpx;
					font-weight: normal;
					color: #979797;
				}
			}
		}

		.user-comment-content {
			flex-direction: column;
			padding-left: 82rpx;
			margin-top: 16rpx;

			.user-comment-content-text {
				font-size: 28rpx;
				font-weight: normal;
				color: #3D3D3D;
				margin-bottom: 14rpx;
			}

			.user-comment-content-image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
	}

	.comment-more {
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-weight: normal;
		color: #3D3D3D;
		margin: 30rpx 0;
	}
}

.class-top-box {
	width: 100%;
	height: 70rpx;
	background-color: #fff;
	position: fixed;
	left: 0;
	z-index: 999;
	padding: 0 32rpx;

	.class-top-box-item {
		flex-direction: column;
		margin-right: 30rpx;

		.class-top-box-item-text {
			font-size: 28rpx;
			font-weight: 500;
			color: #3D3D3D;
		}

		.class-top-box-item-line {
			width: 100%;
			height: 6rpx;
			border-radius: 6rpx;
			margin-top: 6rpx;
		}
	}
}

.tip_image {
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.barnd {
	background: #red;
	height: 240rpx;
	width: calc(100% - 32rpx);
	padding: 10rpx;
	margin-left: 16rpx;
	margin-right: 16rpx;
	font-family: Source Han Sans;



	.brand-top {
		height: 34rpx;
		width: 100%;
		font-size: 24rpx;
		line-height: 80rpx;
		font-weight: bold;
		color: #3D3D3D;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;

	}

	.brand-content {
		height: 160rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		padding: 20rpx 10rpx;

		.brand-img {
			width: 139rpx;
			height: 139rpx;

		}

		.brand-right {
			width: calc(100% - 149rpx);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			height: 139rpx;
			margin-left: 10rpx;

			.brand-title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.title {
					font-size: 24rpx;
					font-weight: bold;
					color: #3D3D3D;
				}

				.brand-right-arrow {
					width: 20rpx;
					height: 20rpx;
					margin-right: 20rpx;
				}
			}

			.brand-labels {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.brand-yes {
					width: 30rpx;
					height: 30rpx;
					margin-left: 6rpx;
				}

				.brand-labels-item {
					font-size: 24rpx;
					font-weight: 300;
					line-height: normal;
					color: #3D3D3D;
					margin-left: 10rpx;
				}
			}
		}
	}
}

.serve {
	height: 470rpx;
	background: #ffffff;
	font-family: Source Han Sans;

	.serve-top {
		height: 50rpx;
		padding: 10rpx;

		.serve-desc {
			font-size: 32rpx;
			font-weight: bold;
			color: #3D3D3D;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.serve-right {
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}
	}

	.serve-category {
		height: 50rpx;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx;
		margin-top: 8rpx;
		margin-bottom: 8rpx;

		.serve-category-item {

			height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			background: #F3F3F3;
			color: #3D3D3D;
			font-size: 24rpx;
			font-weight: bold;
			letter-spacing: 1rpx;
			border-radius: 20rpx;
			padding: 16rpx;
		}

		.serve-active {
			background: #FFEFEA;
			color: #FF6A39;
		}
	}

	.serve-scroll {
		white-space: nowrap;
		width: 100%;
		height: 340rpx;

		.serve-scroll-item {
			display: inline-block;
			width: 200rpx;
			height: 340rpx;
			margin-right: 16rpx;
			margin-left: 16rpx;
			position: relative;

			.serve-img {
				width: 188rpx;
				height: 188rpx;
			}

			.serve-identity {

				font-size: 16rpx;
				font-weight: bold;
				color: #F0F0FD;
				background-color: #08DC48;
				width: 82rpx;
				height: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 16rpx;
				top: 172rpx;
				left: 30px;
				position: absolute;


			}

			.serve-title {
				height: 34rpx;
				width: 100%;
				font-size: 24rpx;
				font-weight: bold;
				color: #3D3D3D;
				letter-spacing: 1rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
			}

			.serve-nurse {
				height: 28rpx;
				width: 100%;
				font-size: 20rpx;
				color: #3D3D3D;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 10rpx;
			}

			.serve-long {
				height: 28rpx;
				width: 100%;
				font-size: 20rpx;
				color: #3D3D3D;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				;
			}

		}
	}
}

.case {
	height: 360rpx;
	background: #ffffff;
	border-top-style: 1rpx solid #FAFAFA;
	font-family: Source Han Sans;

	.case-top {

		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50rpx;
		padding: 10rpx;

		.case-desc {
			font-size: 32rpx;
			font-weight: bold;
			color: #3D3D3D;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.case-right {
			width: 25rpx;
			height: 25rpx;
			margin-right: 10rpx;
		}
	}

	.case-scroll {
		white-space: nowrap;
		width: 100%;
		height: 290rpx;
		margin-top: 20rpx;

		.case-scroll-item {
			display: inline-block;
			width: 260rpx;
			height: 290rpx;
			margin-right: 16rpx;
			margin-left: 16rpx;

			.case-img {
				width: 256rpx;
				height: 170rpx;
				margin-left: 2rpx;
			}

			.case-title {
				height: 34rpx;
				width: 100%;
				font-size: 24rpx;
				font-weight: bold;
				color: #3D3D3D;
				letter-spacing: 1rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 10rpx;
			}

			.case-labels {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;

				.case-labels-item {
					font-size: 22rpx;
					color: #3D3D3D;
					margin-left: 10rpx;
					margin-right: 10rpx;
				}
			}
		}

	}
}

.blank {
	width: 100%;
	height: 32rpx;
	background-color: #fff;
}

.f-han-san {
	font-family: 'Source Han Sans CN';
}

.anchor-active>view {
	color: #F46800 !important;
}

.anchor-border {
	border-bottom: 2rpx solid #F46800 !important;
}

.purchase-active {
	color: #F46800 !important;
	border-bottom: 2rpx solid #F46800 !important;
}

.purchase-types-active {
	color: #fff !important;
	background-color: #F46800 !important;
}

.single-line {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.active {
	color: #FAEA57;
}

.blank_20 {
	width: 100%;
	height: 20rpx;
	background: #F6F6F6;
}

.blank_44 {
	width: 100%;
	height: 20rpx;
	background: #F6F6F6;
}

.blank_10 {
	width: 100%;
	height: 10rpx;
	background: #F6F6F6;
}

.color_green {
	color: #F46800
}


.group-cart {
	width: 86rpx;
	height: 86rpx;
	position: fixed;
	bottom: 200rpx;
	right: 37rpx;
	z-index: 999;

	.group-cart-image {
		width: 100%;
		height: 100%;
	}

	.group-num {
		position: absolute;
		right: 0;
		top: 0;
		width: 30rpx;
		height: 30rpx;
		background: #E81313;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 30rpx;
		text-align: center;
		border-radius: 50%;
	}
}

.share {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	right: 20rpx;

	.share-img {
		width: 50rpx;
		height: 50rpx;
	}

	.share-title {
		color: #ED7735;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 20rpx;
		margin-top: 20rpx;
	}
}
</style>